<template>
    <li class="channel-item clearfix">
        <router-link class="channel-media media" 
            :to="{path: '/channel', params: {id:channel.id}}">
            <div class="channel-media-object pull-left">
                <img :src="channel.cover" alt="#" />
            </div>    
            <div class="media-body over-hidden">
                <div class="media-heading"><h4 class="media-heading-title">{{channel.name}}</h4></div>
                <p class="media-desc">已更新{{channel.live_num}}期</p>  
            </div>
        </router-link>
    </li>
</template>

<script>
export default {
    components: {},
    props: {
        href: {
            type: String,
            default: '/channel'
        },
        channel:{
            type: Object,
            default: {
                id: 0,
                cover: '',
                live_num: 0,
                name: ''
            }
        }
    },
    data() {
        return {
        };
    },
    computed: {},
    methods: {},
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.channel-item {
    display: flex;
    padding: 36px;
    align-items: center;
    position: relative;
    &:after {
        content: '';
        height: 2px;
        position: absolute;
        left: 36px;
        right: 36px;
        bottom: 0;
        background-color: #f0f0f0;
    }
    
    .channel-media {
        display: flex;
        width: 100%;
    }

    .channel-media-object {
        width: 270px;
        height: 150px;
        margin-right: 20px;
        position: relative;
        > img { width: 100%; height: 100%; }
    }


    .media-heading {
        display: flex;
        padding: 20px 0;
        margin-right: 60px;
    }

    .media-heading-title {
        font-size: 28px;
        line-height: 36px;
        color: #353535;
        overflow: hidden;
        text-overflow: ellipsis; 
    }

    .media-desc {
        font-size: 24px;
        line-height: 2;
        color: #747474;
    }
}
</style>